<template>
  <view class="analysis">
    <!--综合分析页面-->
    <view class="userinfo flex flex-column">
      <view class="userinfo-image">
        <image class="imgover" :src="loginData.avatar ? loginData.avatar : '../../static/images/headPortrait.png'" />
      </view>
      <view class="nickName line-1">{{ loginData.nickName || "--" }}</view>
      <view v-for="(item, index) in person" :key="index">{{ item.label }}: {{ item.value }}</view>
      <!-- <view>证件号码：--</view>
      <view>手机号码：{{ loginData.phone }}</view>
      <view>所在机构：--</view> -->
    </view>
    <view class="statistics">
      <view class="modal flex flex-column item-center" style="position: relative">
        <view class="title" style="padding: 24px">最终成绩</view>
        <view style="position: relative">
          <canvas canvas-id="progressCanvas" style="width: 120px; height:120px;"></canvas>
          <view class="progress-title">
            最终成绩
          </view>
          <view class="number" :style="{ 'font-size': score.score >= 100 ? '26px' : '32px' }">{{ score.score }}
            <text>分</text>
          </view>
        </view>
        <view class="practice-info flex flex-column">
          <view class="flex">
            <text class="fs_0">考试项目：</text>
            <label>{{ score.practiceName }}（总分{{ score.totalScore }})</label>
          </view>
          <view>开考时间：{{ score.startTime }}</view>
          <view>交卷时间：{{ score.submitTime }}</view>
        </view>
      </view>

      <view class="modal flex-column item-center">
        <view class="title">分数统计</view>
        <view
          :style="{ width: (windowWidth - 40) + 'px', height: (windowWidth - 40) + 'px', marginLeft: (windowWidth - (windowWidth - 40)) / 2 + 10 + 'px' }">
          <l-echart ref="lineRef" @finished="onGetLine" />
        </view>
      </view>

      <view class="modal flex flex-column item-center">
        <view class="f_1 title">知识结构统计</view>
        <view
          :style="{ width: (windowWidth - 40) + 'px', height: (windowWidth - 40) + 'px', marginLeft: (windowWidth - (windowWidth - 40)) / 2 + 'px' }">
          <l-echart ref="columnarRef" @finished="onGetColumnar" />
        </view>
      </view>

    </view>

  </view>
</template>
<script>
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
import { getComprehensiveAnalysis } from "@/improve/services";
import { mapDictCodes } from '@/services/ServerService.js'

export default {
  name: "analysis",
  data() {
    return {
      mapDictCodesData: [],
      windowWidth: 0,
      loginData: {},
      bhCheckUuid: '',
      person: [],
      score: {
        practiceName: '--',
        score: 0,
        totalScore: 0, // 总分
        startTime: '--',
        submitTime: '--',
      },
      scoreData: {
        type: ['判断题', '单选题', '论述题'], // 类型
        totalScore: [60, 98, 33], // 题型总分
        scoreInt: [30, 34, 22] // 考生得分
      },
      KnowledgeData: {
        type: ['判断题', '单选题', '论述题'], // 类型
        totalScore: [60, 98, 33], // 题型总分
        scoreInt: [30, 34, 22] // 考生得分
      }
    }
  },
  methods: {
    getComprehensiveAnalysis() {
      getComprehensiveAnalysis({ bhCheckUuid: this.bhCheckUuid }).then(res => {
        const scoreDataType = res.fractionalStatistics.type.map(i => this.mapDictCodesData.find(si => i == si.value)?.label)
        this.person = [...res.person]
        this.score = { ...res.score }
        this.scoreData = { ...res.fractionalStatistics, type: scoreDataType }
        this.KnowledgeData = { ...res.knowledgeStructure }
        this.drawProgress()
        this.onGetColumnar()
        this.onGetLine()
      })
    },
    async onGetColumnar() {
      const chart = await this.$refs.columnarRef.init(echarts);
      const option = {
        xAxis: {
          data: this.KnowledgeData.type
        },
        yAxis: {},
        legend: {
          data: ['考核总分', '考核平均分'], // 图例数据，对应 series 中的 name
          bottom: '5%', // 图例位置，可以是 'left', 'right', 'top', 'bottom' 或者具体的像素值
          itemWidth: 12, // 颜色区域宽度
          itemHeight: 12 //
        },
        series: [
          {
            name: "考核总分",
            data: this.KnowledgeData.totalScore,
            type: 'bar',
            stack: 'x',
            itemStyle: {
              color: '#37B874',
            }
          },
          {
            name: "考核平均分",
            data: this.KnowledgeData.scoreInt,
            type: 'bar',
            stack: 'x',
            itemStyle: {
              color: '#9CD986',
              borderRadius: [2, 2, 0, 0],
            }
          }
        ],
        barWidth: 20 // 全局设置柱子宽度为 20 像素
      };
      chart.setOption(option)
    },
    async onGetLine() {
      const chart = await this.$refs.lineRef.init(echarts);
      const option = {
        xAxis: {
          data: this.scoreData.type,
        },
        yAxis: {},
        legend: {
          data: ['考生得分', '题型总分'], // 图例数据，对应 series 中的 name
          bottom: '5%', // 图例位置，可以是 'left', 'right', 'top', 'bottom' 或者具体的像素值
        },
        series: [
          {
            name: "考生得分",
            data: this.scoreData.scoreInt,
            type: 'line',
            smooth: true,
            symbol: 'none',  //去掉线条圆点
            lineStyle: {
              normal: {
                color: '#1ABAB1', //线条颜色
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#1ABAB1' // 折线底下区域渐变色
                    },
                    {
                      offset: 1,
                      color: '#1ABAB100' // 折线底下区域渐变色
                    }
                  ],
                  false
                )
              }
            }
          },
          {
            name: "题型总分",
            data: this.scoreData.totalScore,
            type: 'line',
            smooth: true,
            symbol: 'none',  //去掉线条圆点
            lineStyle: {
              normal: {
                color: '#37B874', //线条颜色
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#37B874' // 折线底下区域渐变色
                    },
                    {
                      offset: 1,
                      color: 'rgb(55 184 116 / 0%)' // 折线底下区域渐变色
                    }
                  ],
                  false
                )
              }
            }
          }
        ]
      };
      chart.setOption(option)
    },
    //圆形进度条
    drawProgress() {
      const canvas = uni.createCanvasContext('progressCanvas', this);
      const centerX = 60; // 圆心的 x 坐标
      const centerY = 60; // 圆心的 y 坐标
      const radius = 50; // 圆的半径
      const progress = this.score.score / this.score.totalScore;
      const startAngle = -Math.PI / 2; // 起始角度（从顶部开始）
      const endAngle = startAngle + 2 * Math.PI * progress; // 结束角度

      // 绘制背景圆环
      canvas.beginPath();
      canvas.setStrokeStyle('#EDFBEF');
      canvas.setLineWidth(10); // 设置线宽
      canvas.arc(centerX, centerY, radius, 0, 2 * Math.PI, true); // 逆时针绘制背景圆环
      canvas.stroke();

      // 创建渐变
      const gradient = canvas.createLinearGradient(centerX, centerY - radius, centerX, centerY + radius);
      gradient.addColorStop(0, '#1ABAB1'); // 结束颜色
      gradient.addColorStop(1, '#37B874'); // 起始颜色

      // 绘制进度圆环
      canvas.beginPath();
      canvas.setStrokeStyle(gradient);
      canvas.setLineWidth(10); // 设置线宽
      canvas.setLineCap('round'); // 设置线条边缘
      canvas.arc(centerX, centerY, radius, startAngle, endAngle, false); // 顺时针绘制进度圆环
      canvas.stroke();

      canvas.draw();
    },
    onMapDictCodes() {
      mapDictCodes('allQuestionType').then(res => {
        this.mapDictCodesData = res.allQuestionType
      })
    },

  },
  onLoad(options) {
    this.onMapDictCodes()
    this.bhCheckUuid = options.bhCheckUuid
    this.getComprehensiveAnalysis()
    uni.getSystemInfo({
      success: (res) => {
        this.windowWidth = res.windowWidth
      }
    })
  },
  mounted() {
    // this.drawProgress()
  },
  onShow() {
    if (uni.getStorageSync('appKey')) {
      this.loginData = {
        ...uni.getStorageSync('loginData'),
      };
    }
  },
}
</script>
<style scoped lang="scss">
.analysis {
  width: 100%;
  height: 100%;

  .userinfo {
    border-bottom-left-radius: 24rpx;
    border-bottom-right-radius: 24rpx;
    background-color: #FFFFFF;
    padding: 20px 0;
    color: #333333;
    font-size: 14px;
    position: relative;

    .userinfo-image {
      width: 80px;
      height: 80px;
      margin: 0 auto;
    }

    image {
      border-radius: 100px;
    }

    .nickName {
      position: absolute;
      background: linear-gradient(to bottom, rgba(107, 213, 82, 0.3294117647), #37B874);
      width: 65px;
      height: 24px;
      text-align: center;
      line-height: 24px;
      padding: 0 10px;
      color: #FFFFFF;
      font-size: 16px;
      border-radius: 22px;
      top: 0;
      left: 50%;
      margin-top: 78px;
      margin-left: -45px;
      // opacity: 0.8;
    }


    >view {
      margin-top: 10px;
      padding: 0 70px;
    }
  }

  .statistics {
    background-color: #FFFFFF;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
    margin-top: 14px;

    canvas {
      width: 110px;
      height: 110px;
    }

    .modal {

      border-bottom: solid 1px #DADADA;
      margin-bottom: 20px;

      &.modal:last-child {
        margin-bottom: 0;
        border-bottom: none;
      }

      .title {
        width: calc(100% - 48px);
        text-align: left;
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        padding: 0 24px;
      }

      .progress-title {
        position: absolute;
        top: 34px;
        left: 34px;
        font-size: 14px;
        color: #333333;
      }

      .number {
        position: absolute;
        top: 60%;
        left: 52%;
        transform: translate(-50%, -50%);
        font-size: 32px;
        font-weight: bold;
        color: #37B874;

        text {
          font-size: 14px;
          font-weight: normal;
        }

      }

      .practice-info {
        width: 100%;
        padding: 20px 0;

        view {
          padding: 0 15%;
        }

        view+view {
          margin-top: 4px;
        }
      }
    }
  }

}
</style>